// src/pages/faq-management/components/FaqForm.tsx
import {
  ModalForm,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTextArea
} from '@ant-design/pro-components';
import {Form} from 'antd';
import React from 'react';

interface FaqFormProps {
  trigger: React.ReactNode;
  onFinish: (values: API.IFaq) => Promise<boolean>;
  initialValues?: API.IFaq;
  formType: 'create' | 'edit';
  categoryOptions: { label: string; value: number }[];
}

const FaqForm: React.FC<FaqFormProps> = ({
                                           trigger,
                                           onFinish,
                                           initialValues,
                                           formType,
                                           categoryOptions
                                         }) => {
  const [form] = Form.useForm();

  return (
    <ModalForm<API.IFaq>
      title={formType === 'create' ? '新建常见问题' : '编辑常见问题'}
      width={800}
      trigger={trigger as any}
      form={form}
      autoFocusFirstInput
      onFinish={async (values) => {
        const success = await onFinish(values);
        if (success) {
          form.resetFields();
        }
        return success;
      }}
      initialValues={initialValues || {
        status: "1",
        sortOrder: 0,
        isHot: "0",
        isRecommend: "1",
      }}
      grid
      colProps={{
        span: 24
      }}
    >
      <ProFormSelect
        name="categoryId"
        label="问题分类"
        options={categoryOptions}
        rules={[{required: true, message: '请选择问题分类'}]}
      />
      <ProFormText
        name="question"
        label="问题内容"
        placeholder="请输入问题内容"
        rules={[{required: true, message: '请输入问题内容'}]}
      />
      <ProFormTextArea
        name="answer"
        label="问题答案"
        placeholder="请输入问题答案"
        rules={[{required: true, message: '请输入问题答案'}]}
        fieldProps={{
          autoSize: {minRows: 4, maxRows: 8}
        }}
      />
      <ProFormDigit
        name="sortOrder"
        label="排序权重"
        placeholder="请输入排序权重"
        min={0}
        fieldProps={{precision: 0}}
      />
      <ProFormRadio.Group
        name="isHot"
        label="是否热门"
        colProps={{span: 8}}
        options={[
          {label: '是', value: "0"},
          {label: '否', value: "1"},
        ]}
      />
      <ProFormRadio.Group
        name="isRecommend"
        label="是否推荐"
        colProps={{span: 8}}
        options={[
          {label: '是', value: "0"},
          {label: '否', value: "1"},
        ]}
      />
      <ProFormRadio.Group
        name="status"
        label="状态"
        colProps={{span: 8}}
        options={[
          {label: '启用', value: "0"},
          {label: '禁用', value: "1"},
        ]}
        rules={[{required: true, message: '请选择状态'}]}
      />
    </ModalForm>
  );
};

export default FaqForm;
